<template>
    <div class="list">
        <van-nav-bar title="文章详情" left-arrow @click-left='fh'/>
        <div class="heads">
            <div class="con">
                <h1>{{ avat.title }}</h1>
            </div>
            <div class="imgscr">
                <div>
                    <img :src="avat.avatar" alt="">
                </div>
                <van-cell center :title="avat.author" :label="avat.time | dateFormate" />
            </div>
            <div class="conent">
                <p>{{ avat.content}}</p>
            </div>
        </div>
        <van-divider/>
        <div class="footed">
            <div class="_left">
                <span>评论：{{ avat.comment }}</span>
            </div>
            <div class="_right">
                <span>收藏：{{ avat.fav }}</span>&nbsp;&nbsp;<span>点赞：{{ avat.like }}</span>
            </div>
        </div>
        <van-divider/>
        <div class="bootom">
            <ul>
                <li v-for="(item,index) in conct" :key="index">
                    <div class="headscc">
                        <div class="imgscrdd">
                            <div>
                                <img :src="item.info.avatar" alt="">
                            </div>
                            <van-cell center :title="item.info.nickname" :label="item.content">
                                <van-icon name="good-job-o" @click="Thumbs(index)" :color="cc ? 'red' : ''"/>
                            </van-cell>
                        </div>
                        <div class="conented">
                            <span>{{ avat.time | dateFormate }}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span @click="Reply(index)">{{ item.reply_num }}回复</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bott">
            <van-button type="primary" round size="small" @click="comments">写评论</van-button>
            <van-icon name="comment-o" :badge="avat.comment"/>
            <van-icon name="star-o" @click="collection" :color="is_fav ? 'red' : ''"/>
            <van-icon name="good-job-o" @click="like" :color="is_like ? 'red' : ''"/>
            <van-icon name="share-o" />
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
            <van-field v-model="message" rows="5" autosize type="textarea" maxlength="200" placeholder="请输入留言" show-word-limit/>
            <div class="button">
                <van-button type="primary" size="normal" @click="publish">发布</van-button>
            </div>
        </van-popup>
        <van-popup v-model="showfa" position="bottom" :style="{ height: '30%' }">
            <van-field v-model="messages" rows="5" autosize type="textarea" maxlength="200" placeholder="请输入留言" show-word-limit/>
            <div class="button">
                <van-button type="primary" size="normal" @click="publist">确定</van-button>
            </div>
        </van-popup>
        <van-popup v-model="showss" closeable position="bottom" :style="{ height: '100%' }">
            <van-nav-bar title="回复"/>
            <div class="bootomss">
                <div class="imgscrdd">
                    <div>
                        <img :src="Secondarys.avatar" alt="">
                    </div>
                    <van-cell center :title="Secondarys.nickname" :label="Secondary.content"/>
                </div>
                <van-divider/>
                <ul>
                    <li v-for="(item,index) in ercomment" :key="index">
                        <div class="headscc">
                            <div class="imgscrdd">
                                <div>
                                    <img :src="item.info.avatar" alt="">
                                </div>
                                <van-cell center :title="item.info.nickname" :label="item.content">
                                </van-cell>
                            </div>
                            <div class="conented">
                                <span>{{ avat.time | dateFormate }}</span>
                            </div>
                        </div>
                        
                    </li>
                </ul>
            </div>
            <div class="botton">
                <van-button type="primary" round size="small" @click="coent">回复{{ Secondarys.nickname }}</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { Toast } from 'vant';

export default {
    data(){
        return{
            id:'',
            user_id:'',
            avat:'',
            conct:[],
            show:false,
            message:'',
            is_fav:false,
            is_like:false,
            showss:false,
            ercomment:[],
            Secondary:'',
            Secondarys:'',
            cc:false,
            showfa:false,
            messages:'',
            er_id:''
        }
    },
    created(){
        this.id = this.$route.query.id
        this.user_id = JSON.parse(localStorage.getItem('userInfo'))._id
        this.$http.post('/api/get_article_detail',{
            article_id:this.id,
            user_id:this.user_id
        })
        .then((res)=>{
            this.avat = res.data
            this.is_fav = res.data.is_fav
            this.is_like = res.data.is_like
        })
        this.$http.post('/api/get_comment_list',{
            article_id:this.id,
            skip:0,
            limit:10,
            user_id:this.user_id
        })
        .then((res)=>{
            this.conct = res.data
            console.log(this.conct)
        })
    },
    methods:{
        Reply(index){
            this.showss = true
            this.er_id = this.conct[index]._id
            this.Secondary = this.conct[index]
            this.Secondarys =  this.Secondary.info
            this.$http.post('/api/get_reply_list',{
                article_id:this.id,
                skip:0,
                limit:20,
                reply_comment_id:this.er_id,
                user_id:this.user_id
            })
            .then((res)=>{
                this.ercomment = res.data
            })
        },
        fh(){
            this.$router.push('/anniu1')
        },
        Thumbs(index){
            let bb = this.conct[index].user_id
            if(this.cc == true){
                this.$http.post('/api/unlike',{
                    article_id:this.id,
                    user_id:bb
                })
                .then((res)=>{
                    console.log(res)
                    this.cc = false
                    Toast('取消点赞');
                })
            }else if(this.cc == false){ 
                this.$http.post('/api/like',{
                    article_id:this.id,
                    user_id:bb
                })
                .then((res)=>{
                    console.log(res)
                    this.cc = true
                    Toast('点赞成功');
                }) 
            }
        },
        comments(){
            this.show = true
        },
        publish(){
            this.$http.post('/api/add_comment',{ 
                user_id:this.user_id,
                article_id:this.id,
                comment_type:0,
                reply_comment_id:'',
                content:this.message
            })
            .then((res)=>{
                console.log(res)
                this.show = false
                this.message = ''
                this.$http.post('/api/get_comment_list',{
                    article_id:this.id,
                    skip:0,
                    limit:10,
                    user_id:this.user_id
                })
                .then((res)=>{
                    this.conct = res.data
                    console.log(this.conct)
                })
            })
        },
        collection(){
            if(this.is_fav == true){
                this.$http.post('/api/remove_fav',{
                    article_id:this.id,
                    user_id:this.user_id
                })
                .then((res)=>{
                    console.log(res)
                    this.is_fav = false
                    Toast('取消收藏');
                    this.$http.post('/api/get_article_detail',{
                        article_id:this.id,
                        user_id:this.user_id
                    })
                    .then((res)=>{
                        this.avat = res.data
                        this.is_fav = res.data.is_fav
                        this.is_like = res.data.is_like
                    })
                })
            }else if(this.is_fav == false){ 
                this.$http.post('/api/add_fav',{
                    article_id:this.id,
                    user_id:this.user_id
                })
                .then((res)=>{
                    console.log(res)
                    this.is_fav = true
                    Toast('收藏成功');
                        this.$http.post('/api/get_article_detail',{
                        article_id:this.id,
                        user_id:this.user_id
                    })
                    .then((res)=>{
                        this.avat = res.data
                        this.is_fav = res.data.is_fav
                        this.is_like = res.data.is_like
                    })
                }) 
            }
        },
        like(){
            if(this.is_like == true){
                this.$http.post('/api/unlike',{
                    article_id:this.id,
                    user_id:this.user_id
                })
                .then((res)=>{
                    console.log(res)
                    this.is_like = false
                    Toast('取消点赞');
                    this.$http.post('/api/get_article_detail',{
                        article_id:this.id,
                        user_id:this.user_id
                    })
                    .then((res)=>{
                        this.avat = res.data
                        this.is_fav = res.data.is_fav
                        this.is_like = res.data.is_like
                    })
                })
            }else if(this.is_like == false){ 
                this.$http.post('/api/like',{
                    article_id:this.id,
                    user_id:this.user_id
                })
                .then((res)=>{
                    console.log(res)
                    this.is_like = true
                    Toast('点赞成功');
                    this.$http.post('/api/get_article_detail',{
                        article_id:this.id,
                        user_id:this.user_id
                    })
                    .then((res)=>{
                        this.avat = res.data
                        this.is_fav = res.data.is_fav
                        this.is_like = res.data.is_like
                    })
                }) 
            }
        },
        coent(){
            this.showfa = true
        },
        publist(){
            this.$http.post('/api/add_comment',{ 
                user_id:this.user_id,
                article_id:this.id,
                comment_type:1,
                reply_comment_id:this.er_id,
                content:this.messages
            })
            .then((res)=>{
                console.log(res)
                this.showfa = false
                this.messages = ''
                this.$http.post('/api/get_reply_list',{
                    article_id:this.id,
                    skip:0,
                    limit:20,
                    reply_comment_id:this.er_id,
                    user_id:this.user_id
                })
                .then((res)=>{
                    this.ercomment = res.data
                })
            })
        }
    }
}
</script>
<style>
*{
    word-break: break-all;
    word-wrap: break-word;
}
.list .van-nav-bar .van-icon{
    color: black;
    font-size: 25px;
}
.list .van-nav-bar__content{
    width: 100%;
    position: fixed;
    top: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
    background-color: #f6f7f9;
}
.heads{
    padding-top: 40px;
    width: 100%;
}
.con{
    padding-left: 20px;
    font-size: 10px;
}
.imgscr{
    height: 60px;
    padding-left: 20px;
    display: flex;
}
.imgscr img{
    width:50px;
    height:50px;
    border-radius: 999px;
}
.imgscr .van-cell{
    font-size: 12px;
    background-color: #ffffff;
}
.imgscr .van-cell__label{
    font-size: 12px;
}

.conent{
    padding-left: 10px;
    font-size: 16px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.van-divider{
    border-color: rgb(215, 215, 215);
}
.footed{
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footed ._left{
    float: left;
    padding-left: 10px;
    font-size: 18px;
}
.footed ._right{
    float: right;
    padding-right: 10px;
    color: #777;
}
.bootom{
    padding-bottom: 60px;
}
.bott{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
    background-color: #f6f7f9;
}
.bott .van-button--small{
    margin-left: 20px;
    width: 50%;
    background-color: white;
    color: #777;
    border: 1px solid rgb(215, 215, 215);
    font-size: 16px;
}
.bott .van-icon{
    font-size: 20px;
    padding: 0 10px;
    color: #777;
}
.bott .van-info{
    right: 10px;
}
.headscc{
    width: 100%;
    border-bottom: 0.1px solid rgb(215, 215, 215);
}
.imgscrdd{
    height: 50px;
    padding-left: 20px;
    display: flex;
}
.imgscrdd img{
    width:40px;
    height:40px;
    border-radius: 999px;
    padding-top: 5px;
}
.imgscrdd .van-cell{
    widows: 100%;
    height: 50px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.imgscrdd .van-cell span{
    font-size: 10px;
}
.imgscrdd .van-cell .van-cell__value{
    font-size: 20px;
    color: #777;
}
.conented{
    padding-left: 75px;
    color: #777;
    background-color: #fff;
}
.van-popup__close-icon--top-right{
    left: 10px;
}
.bootomss{
    padding-top: 50px;
}
.button{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.button .van-button--normal{
    width: 100%;
}
.botton{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
    background-color: #f6f7f9;
}
.botton .van-button--small{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.botton .van-button--primary{
    background-color: #fff;
    border: 1px solid #fff;
    color: #777;
}
</style>